import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get.dart';
import 'package:yi_shop/route/index.dart';
import 'package:yi_shop/ui/draw_under_line.dart';
import 'package:yi_shop/utils/colors.dart';
import 'package:yi_shop/utils/styles.dart';
import 'package:yi_shop/utils/svg.dart';

class HomeMineController extends GetxController {
  Rx<_UserModel> user = Rx(_UserModel(
      fans: 101,
      follow: 100,
      nickname: '原型大师',
      avatar:
          'https://img0.baidu.com/it/u=3762686575,934747082&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1712768400&t=9ee37c534e5ae0adcc226f923ece69dd',
      levelText: '铂金会员'));

  List<_TypeModel> typeList = [
    _TypeModel(iconName: 'u14100', name: '待付款', url: RoutePath.systemOrderList),
    _TypeModel(iconName: 'u14099', name: '待发货', url: RoutePath.systemOrderList),
    _TypeModel(iconName: 'u14103', name: '待收货', url: RoutePath.systemOrderList),
    _TypeModel(iconName: 'u14110', name: '全部订单', url: RoutePath.systemOrderList),
    _TypeModel(iconName: 'u14163', name: '退换/售后', url: RoutePath.saleRefund),
    _TypeModel(iconName: 'u6416', name: '评价', url: RoutePath.evaluateCenter),
    _TypeModel(iconName: 'u14168', name: '钱包', url: RoutePath.walletMine),
  ];

  List<_NavModel> navList = [
    _NavModel(iconName: 'u14179', name: '购物车', url: RoutePath.shopCart),
    _NavModel(iconName: 'u14182', name: '优惠券', url: RoutePath.mineCouponList, count: 3),
    _NavModel(iconName: 'u14204', name: '邀请有礼', url: RoutePath.inviteGift),
    _NavModel(iconName: 'u14202', name: '我的关注', url: RoutePath.mineAttention),
    _NavModel(iconName: 'u14189', name: '我的收藏', url: RoutePath.mineCollect),
    _NavModel(iconName: 'u14112', name: '我的足迹', url: RoutePath.mineFootmark),
    _NavModel(iconName: 'u14113', name: '服务中心', url: RoutePath.serviceCenter),
    _NavModel(iconName: 'u14191', name: '地址管理', url: RoutePath.addressManage),
    _NavModel(iconName: 'u14115', name: '反馈意见', url: RoutePath.mineOpinionFeedback),
  ];
}

class HomeMineView extends GetView<HomeMineController> {
  const HomeMineView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        actions: [
          IconButton(
              onPressed: () {
                Get.toNamed(RoutePath.mineSignIn);
              },
              icon: SvgUtils.assetName('u14088', width: 20, height: 20)),
          IconButton(
              onPressed: () {
                Get.toNamed(RoutePath.mineSettingAccount);
              },
              icon: SvgUtils.assetName('u14089', width: 20, height: 20))
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.only(bottom: 35),
        child: Column(
          children: [
            Container(
              color: ColorsUtils.parseColorFromHexString(ColorsUtils.colorF048),
              padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Center(
                        child: Obx(() => InkWell(
                              onTap: () {
                                Get.toNamed(RoutePath.mineSettingInfo);
                              },
                              child: CircleAvatar(
                                radius: 25,
                                backgroundImage: NetworkImage(controller.user.value.avatar),
                              ),
                            )),
                      ),
                      Container(
                        padding: const EdgeInsets.only(left: 10),
                        child: Column(
                          children: [
                            Container(
                              alignment: Alignment.centerLeft,
                              child: Obx(() => Text(
                                    controller.user.value.nickname,
                                    style: StylesUtils.customTextStyle(
                                        fontSize: StylesUtils.fontSize18),
                                  )),
                            ),
                            InkWell(
                              onTap: () {
                                Get.toNamed(RoutePath.memberCenter);
                              },
                              child: Container(
                                margin: const EdgeInsets.only(top: 8),
                                alignment: Alignment.center,
                                constraints: const BoxConstraints.expand(width: 77, height: 22),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(11),
                                    border: Border.all(color: Colors.white)),
                                child: Obx(() => Text(
                                      controller.user.value.levelText,
                                      style: StylesUtils.customTextStyle(),
                                    )),
                              ),
                            )
                          ],
                        ),
                      )
                    ],
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 50.w),
                    child: InkWell(
                      onTap: () {
                        Get.toNamed(RoutePath.mineAttention);
                      },
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '关注',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.colorF2f2),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 15),
                            alignment: Alignment.centerLeft,
                            child: Obx(() => Text(
                                  '${controller.user.value.follow}',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.colorF2f2),
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(left: 50.w),
                    child: InkWell(
                      onTap: () {
                        Get.toNamed(RoutePath.mineFans);
                      },
                      child: Column(
                        children: [
                          Container(
                            alignment: Alignment.centerLeft,
                            child: Text(
                              '粉丝',
                              style: StylesUtils.customTextStyle(color: ColorsUtils.colorF2f2),
                            ),
                          ),
                          Container(
                            margin: const EdgeInsets.only(top: 15),
                            alignment: Alignment.centerLeft,
                            child: Obx(() => Text(
                                  '${controller.user.value.fans}',
                                  style: StylesUtils.customTextStyle(color: ColorsUtils.colorF2f2),
                                )),
                          )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
            Container(
              color: Colors.white,
              padding: const EdgeInsets.symmetric(vertical: 15),
              child: StaggeredGrid.count(
                crossAxisCount: 4,
                mainAxisSpacing: 25,
                children: controller.typeList
                    .map((e) => InkWell(
                          onTap: () {
                            Get.toNamed(e.url);
                          },
                          child: Column(
                            children: [
                              Center(
                                child: SvgUtils.assetName(e.iconName, width: 31, height: 25),
                              ),
                              Container(
                                margin: const EdgeInsets.only(top: 10),
                                alignment: Alignment.center,
                                child: Text(
                                  e.name,
                                  style: StylesUtils.customTextStyle(
                                      fontSize: StylesUtils.fontSize13,
                                      color: ColorsUtils.color6666),
                                ),
                              )
                            ],
                          ),
                        ))
                    .toList(),
              ),
            ),
            Container(
              margin: const EdgeInsets.only(top: 20),
              color: Colors.white,
              child: ListBody(
                children: controller.navList
                    .map((e) => InkWell(
                          onTap: () {
                            Get.toNamed(e.url);
                          },
                          child: DrawUnderLine(
                            color: underLineColor,
                            child: Container(
                              height: 50,
                              padding: const EdgeInsets.symmetric(horizontal: 20),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Wrap(
                                    spacing: 30,
                                    alignment: WrapAlignment.spaceBetween,
                                    crossAxisAlignment: WrapCrossAlignment.center,
                                    children: [
                                      SvgUtils.assetName(e.iconName, width: 20, height: 20),
                                      Text(
                                        e.name,
                                        style: StylesUtils.customTextStyle(
                                            color: ColorsUtils.color3333),
                                      )
                                    ],
                                  ),
                                  Wrap(
                                    spacing: 20,
                                    alignment: WrapAlignment.end,
                                    crossAxisAlignment: WrapCrossAlignment.center,
                                    children: [
                                      if (e.count > 0)
                                        Container(
                                          alignment: Alignment.center,
                                          constraints:
                                              const BoxConstraints.expand(width: 20, height: 20),
                                          decoration: BoxDecoration(
                                              color: ColorsUtils.parseColorFromHexString(
                                                  ColorsUtils.colorF048),
                                              borderRadius: BorderRadius.circular(10)),
                                          child: Text(
                                            '${e.count}',
                                            style: StylesUtils.customTextStyle(
                                                color: ColorsUtils.colorF2f2,
                                                fontSize: StylesUtils.fontSize10),
                                          ),
                                        ),
                                      Icon(
                                        Icons.arrow_forward_ios,
                                        size: 15,
                                        color: ColorsUtils.parseColorFromHexString(
                                            ColorsUtils.colorCccc),
                                      ),
                                    ],
                                  )
                                ],
                              ),
                            ),
                          ),
                        ))
                    .toList(),
              ),
            )
          ],
        ),
      ),
    );
  }

  Color get underLineColor {
    return ColorsUtils.parseColorFromHexString(ColorsUtils.colorF2f2);
  }
}

class _UserModel {
  int fans;

  int follow;

  String nickname;

  String avatar;

  String levelText;

  _UserModel(
      {required this.fans,
      required this.follow,
      required this.nickname,
      required this.avatar,
      required this.levelText});
}

class _TypeModel {
  String iconName;
  String name;
  String url;

  _TypeModel({required this.iconName, required this.name, required this.url});
}

class _NavModel {
  String iconName;
  String name;
  String url;
  int count;

  _NavModel({required this.iconName, required this.name, required this.url, this.count = 0});
}
